<template>
  <div>
    <a-button type="primary" @click="showModal">弹窗1</a-button>
    <a-button type="primary" @click="showModal2">弹窗2</a-button>
    <a-button type="primary" @click="showModal3">弹窗长内容</a-button>
    <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk" :maskClosable="false">
      <div class="flex flex-col content">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </a-modal>

    <!-- 这里包裹自定义类方便做区分重写 注意wrapClassName-->
    <a-modal v-model:open="open2" @ok="handleOk" :maskClosable="false" wrapClassName="plain" title="普通弹窗">
      <div class="flex flex-col content">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </a-modal>

    <!-- 这里包裹自定义类方便做区分重写， 长内容 注意wrapClassName -->
    <a-modal v-model:open="open3" @ok="handleOk" :maskClosable="false" wrapClassName="plain" title="长内容">
      <div class="flex flex-col content">
        <p v-for="i in 100">Some contents...</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
const open = ref(false)
const showModal = () => (open.value = true)
const open2 = ref(true)
const showModal2 = () => (open2.value = true)
const open3 = ref(true)
const showModal3 = () => (open3.value = true)
</script>

<style lang="scss" scoped>
.content {
  color: #fff;
  padding: 10px 40px;
}
</style>
